<template>
  <zm-view ref="view" background="#fff">
    <view class="flex flex-col items-center">
      <block v-if="isFilm">
        <image class="paying" :src="useImage('/zuimei-film-oss/1.0.0/gif/paying.gif')" />
        <view class="px-40 text-999 font-26 text-center tip">系统正在提交订单，请稍等 </view>
        <zm-button width="290rpx" height="88rpx" type="primary" text-size="32rpx" text-weight="600" round @click="lookOrderDetail">查看订单详情</zm-button>
      </block>

      <view v-else class="pt-30">
        <!-- 充值，开卡 -->
        <image class="paying mb-40" :src="useImage('/zuimei-film-oss/1.0.0/gif/recharge.gif')" />
        <view class="font-26 text-999 text-center">
          {{ loadingText }}
        </view>
      </view>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
export default {
  name: "wait",
  mixins: [page],
  data() {
    return {
      orderTypeHandlers: {
        accoutRecharge: { api: this.getBalanceOrderStatus, title: "充值", tip: "订单充值中" },
        film: { api: this.getFilmOrderStatus, title: "出票", tip: "" },
        cardRecharge: { api: this.getCardOrderStatus, title: "充值", tip: "订单充值中" },
        equityCard: { api: this.getVipCardOrderStatus, title: "开卡", tip: "开卡中" },
        mall: { api: this.getMallOrderStatus, title: "支付", tip: "支付中，请稍等" }
      },
      orderType: "",
      orderId: "",
      vip: false, // 开卡成为vip
      timer: null,
      options: {
        emitFlag: false
      }
    }
  },
  computed: {
    isFilm() {
      return this.orderType == "film"
    },
    loadingText() {
      return this.orderTypeHandlers[this.orderType]?.tip || ""
    }
  },
  onLoad(options) {
    this.options = options
    this.orderType = options.orderType
    this.orderId = options.orderId
    this.vip = options.vip
    this.setTitle()
    this.setTimer()
  },
  onUnload() {
    !this.vip && this.clearTimer()
  },
  methods: {
    setTitle() {
      uni.setNavigationBarTitle({ title: `正在${this.orderTypeHandlers[this.orderType].title}` })
    },
    clearTimer() {
      this.timer && clearTimeout(this.timer)
    },
    setTimer() {
      this.timer = setTimeout(() => {
        this.clearTimer()
        // 判断订单类型，轮询对应的状态请求
        const handler = this.orderTypeHandlers[this.orderType]?.api
        handler && handler.call(this)
      }, 1000)
    },
    // 余额充值订单状态轮询
    getBalanceOrderStatus() {
      uni.$api.balance.getOrderStatus({ orderId: this.orderId }).then((res) => {
        const status = res.orderStatus
        if (status == "4") {
          // 4:订单成功
          uni.$emit("pay-success")
        } else if (["0", "1"].includes(status)) {
          // 0:待支付  1:已支付
          this.setTimer()
        } else if (["2", "3", "5"].includes(status)) {
          // 2: 取消订单 3：订单超时 5: 退单退款
          this.toView({
            url: "pages/pay/pay-error/pay-error",
            type: "reLaunch"
          })
        }
      })
    },
    // 电影卡充值订单轮询
    getCardOrderStatus() {
      uni.$api.card.getCardOrderStatus({ orderId: this.orderId }).then((res) => {
        const status = res.orderStatus
        if (status == "4") {
          // 4:订单成功
          uni.$emit("pay-success")
        } else if (["0", "1"].includes(status)) {
          // 0:待支付  1:已支付
          this.setTimer()
        } else if (["2", "3", "5"].includes(status)) {
          // 2: 取消订单 3：订单超时 5: 退单退款
          this.toView({
            url: "pages/pay/pay-error/pay-error",
            type: "reLaunch"
          })
        }
      })
    },
    // 影票订单状态轮询
    getFilmOrderStatus() {
      uni.$api.orderFilm
        .getOrderStatus({ orderId: this.orderId })
        .then((res) => {
          const orderStatus = res.orderStatus
          if (["4", "5"].includes(orderStatus)) {
            this.$store.dispatch("getUserInfo") // 更新用户信息
            if (uni.$currentRoute == "pages/pay/wait/wait") {
              if (this.options.emitFlag) {
                uni.$emit("pay-success")
              } else {
                this.toView({
                  url: "pages/order/order-film-info/order-film-info",
                  type: "reLaunch",
                  params: {
                    orderId: this.orderId
                  }
                })
              }
            }
          } else if (["3"].includes(orderStatus)) {
            if (uni.$currentRoute == "pages/pay/wait/wait") {
              this.toView({
                url: "pages/pay/pay-error/pay-error",
                type: "reLaunch"
              })
            }
          } else {
            this.setTimer()
          }
        })
        .catch((err) => {
          console.log(err, "接口错误")
          this.setTimer()
        })
    },
    // 会员卡订单轮询
    getVipCardOrderStatus() {
      uni.$api.vipCardV2.getOrderInfo({ orderId: this.orderId }).then((res) => {
        const status = res.orderStatus
        if (status == "4") {
          // 4:订单成功
          this.$store.dispatch("getUserInfo") // 更新用户信息
          if (uni.$currentRoute == "pages/pay/wait/wait") {
            uni.$emit("pay-success")
          }
        } else if (["0", "1"].includes(status)) {
          // 0:待支付  1:已支付
          this.setTimer()
        } else if (["2", "3", "5"].includes(status)) {
          // 2: 取消订单 3：订单超时 5: 退单退款
          if (uni.$currentRoute == "pages/pay/wait/wait") {
            this.toView({
              url: "pages/pay/pay-error/pay-error",
              type: "reLaunch"
            })
          }
        }
      })
    },
    // 商品订单轮询
    getMallOrderStatus() {
      uni.$api.mall
        .getOrderStatus({ orderId: this.orderId })
        .then((res) => {
          const orderStatus = res.orderStatus
          if (["1", "4"].includes(orderStatus)) {
            this.toView({
              url: "pages/order/order-mall-info/order-mall-info",
              type: "reLaunch",
              params: {
                orderId: this.orderId
              }
            })
          } else if (["3", "5"].includes(orderStatus)) {
            this.toView({
              url: "pages/pay/pay-error/pay-error",
              type: "reLaunch"
            })
          } else {
            this.setTimer()
          }
        })
        .catch((err) => {
          console.log(err, "接口错误")
          this.$router.push(`/payError`)
        })
    },
    // 查看影票订单详情
    lookOrderDetail() {
      this.toView({
        url: "pages/order/order-film-info/order-film-info",
        type: "reLaunch",
        params: {
          orderId: this.orderId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.paying {
  margin-top: 160rpx;
  width: 226rpx;
  height: 157rpx;
}
.tip {
  margin: 20rpx 0 100rpx;
}
</style>
